<template>
  <div class="detail">
    <div class="header" style="display:flex;height:40.5px;">
      <van-icon name="revoke" @click="toHome"/>
      <van-tabs v-model="active">
        <van-tab title="商品详情" name="0">
          <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in tabImages" :key="index">
              <img v-lazy="image.url" />
            </van-swipe-item>
          </van-swipe>
          <div class="content">
            <div class="title">
              {{this.title}}
            </div>
            <div class="description">
              <div class="price">¥{{this.price}}</div>
              <div class="originPrice">￥{{this.originPrice}}</div>
              <div class="jifen">{{this.jifen}}</div>
            </div>
          </div>
          <div class="images">
            <van-image
              width="375"
              v-for="(item,index) in deImages"
              :key="index"
              :src="item.url"
            />
          </div>
        </van-tab>
        <van-tab title="用户评价" name="1">
          <div class="tags">
            <ul class="tag">
              <li
              v-for="(item,index) in tags"
              :key="index">{{item.tagName}} {{item.count}}</li>
            </ul>
            <ul class="all">
              <li class="oneAll">全部</li>
              <li>晒图 {{this.upImgCount}}</li>
              <li>追评 {{this.reCount}}</li>
              <li>好评 {{this.goodCount}}</li>
            </ul>
          </div>
          <div class="forms" v-for="item in forms" :key="item.id">
            <div class="forms-header">
              <van-image
                round
                width="37.5px"
                height="37.5px"
                :src="item.userInfo.avatarUrl"
              />
              <h4>{{item.userInfo.userName}}</h4>
            </div>
            <div class="forms-content">
              <p>
                {{item.content}}
              </p>
              <van-image
                width="104px"
                height="104px"
                :src="im"
                v-for="(im,index) in item.imageList"
                :key="index"
              />
            </div>
            <div class="forms-footer">
              <p>
                <span>官方回复:</span>
                {{item.replyComment.content}}
              </p>
            </div>
          </div>
        </van-tab>
        <van-tab title="参数及包装" name="2">
          <van-image
            width="375"
            v-for="(item,index) in canshu"
            :key="index"
            :src="item.url"
            :style="{marginLeft:-36}"
            @click="fn(this.pros)"
          />
        </van-tab>
      </van-tabs>

      <template class="footer">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" dot />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          :badge="this.$store.getters.totalCarts"
          to="/cart"
        />
        <van-goods-action-icon icon="shop-o" text="店铺" badge="1" />
        <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click.stop="addToCart()"
        />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </template>

    </div>
  </div>
</template>

<script>
import { getDetails, getDetailEv } from '@/api/detail'
export default {
  name: 'Detail',
  data() {
    return {
      active: 0,
      // 轮播图数据
      tabImages: [],
      // 标题
      title: '',
      originPrice: '',
      price: '',
      // 积分
      jifen: '',
      deImages: [],
      // 参数及包装
      canshu: [],
      gSpuId: '',
      tags: [],
      forms: [],
      upImgCount: '',
      reCount: '',
      goodCount: '',
      // 商品详细数据
      pros: [],
      total: '',
    }
  },
  created() {
    getDetails(this.$route.query.skuId).then(item => {
      this.pros = {
        id: item.data.id,
        title: item.data.name,
        price: item.data.price,
        url: item.data.url,
        amount: 1,
        checked: true,
      }
      this.tabImages = item.data.duoDuanDetailImages
      this.title = item.data.name
      this.price = item.data.price
      this.originPrice = item.data.originalPrice
      this.jifen = item.data.creditsRateText
      this.deImages = item.data.duoDuanDescriptionImages
      this.canshu = item.data.specImagesMaps
      this.gSpuId = item.data.goodsSpuId
      getDetailEv(this.gSpuId).then(item => {
        this.tags = item.data.goodsCommentTags
        this.forms = item.data.goodsCommentsForms
        this.upImgCount = item.data.uploadImgCount
        this.reCount = item.data.reviewCommentsCount
        this.goodCount = item.data.goodCommentCount
      })
    })
  },
  methods: {
    toHome() {
      this.$router.push('/home')
    },
    addToCart() {
      this.$store.commit('addCart', this.pros)
      // 提示
      this.$toast({
        type: 'success',
        message: '加入成功',
      })
    },
  },
}
</script>

<style lang="less" scoped>
    /deep/.van-icon{
      height: 20px!important;
      line-height: 20px!important;
    }
  .forms{
    width: 375px;
    padding: 0 0.5rem;
    margin-top: 30px;
    .forms-header{
      display: flex;
      /deep/.van-image{
        margin-top: 15px;
      }
      h4{
        font-weight: 500;
        height: 0.48rem;
        line-height: .48rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-left: 10px;
      }
    }
    .forms-content{
      p{
        width: 325px;
        font-size: .4rem;
        line-height: .5rem;
        overflow-wrap: break-word;
        opacity: .85;
      }
      /deep/.van-image{
        margin-left: 4px;
      }
    }
    .forms-footer{
      width: 325px;
      padding: 0.24rem 0.3rem;
      background-color: #f6f6f6;
      border-radius: 0.16rem;
      padding-left: 0;
      p{
        font-size: .4rem;
        line-height: .5rem;
        color: rgba(0,0,0,.85);
        padding: 10px 10px;
        span{
          color: #ffa100;
        }
      }
    }
  }
  /deep/.van-tabs__content{
    margin-left: -36px;
  }
  /deep/.van-swipe-item{
    height: 375.2px;

    img{
      width: 100%;
      height: 100%;
    }
  }
  /deep/.van-icon{
    color: rgb(246, 52, 52);
    font-size: 0.46rem;
    height: 40px;
    line-height: 40px;
    margin-left: 20px;
;
  }
  /deep/.van-tabs{
    width: 260px;
    flex:1;
    /deep/.van-tab.van-tab--active{
      width: 80px;
      flex: inherit;
      -webkit-flex: inherit;
    }
  }
  .tags {
    margin-right: 10px;
    :nth-child(2){
      margin-right: 100px;
    }
    .tag{
      display: flex;
      flex-wrap: wrap;
      font-size: .28rem;
      text-align: center;
      width: 375px;
      li{
        height: 36px;
        width: 104px;
        border: 1px solid rgba(0,0,0,.12);
        border-radius: 0.68rem;
        margin: 0 0.1rem 0.3rem 0.1rem;
        line-height: 36px;
      }
    }
    .all{
      display: flex;
      font-size: .28rem;
      text-align: center;
      margin-top: 10px;
      width: 360px;
      li{
        width: 64px;
        height: 20px;
        margin-right: 0.2rem;
        padding: 0.145rem 0.3rem;
        line-height: .5rem;
        background-color: #f6f6f6;
        border: 1px solid #f6f6f6;
        border-radius: 0.68rem;
      }
      .oneAll{
        color: #f34141;
        background-color: #fde3e3;
        border-color: #f34141;
        width: 40px;
      }
    }
  }
  .content{
    padding: 0 0.24rem 0.32rem 0.24rem;
    .title{
      max-height: 1.8rem;
      margin-top: 0.5rem;
      overflow: hidden;
      color: #333;
      font-weight: 500;
      font-size: .4rem;
      line-height: .6rem;
      width: 350px;
    }
    .description{
      .price{
        color: #f63434;
        font-size: .44rem;
        font-weight: 500;
      }
      .originPrice{
        color: #b2b2b2;
        font-weight: 400;
        font-size: .24rem;
        text-decoration: line-through;
      }
      .jifen{
        margin: 0.08rem 0 0 0.2rem;
        padding: 0 0.04rem;
        color: #ff722c;
        font-size: .2rem;
        background: #fff5e8;
        border-radius: 0.04rem;
      }
    }
  }
</style>
